<template>
	<div style="width: 70%;">
		<div class="title"><span>AllSale 商家入驻申请</span></div>
		<div>
			<wsPanel>
				<template slot="panel_head_title">申请信息</template>
				<div slot="panel_body" class="ws-form-div">
					<div class="ws-form-div-form" v-if="result.code != 0">
						<div class="errorMsg" v-if="result.code != 0">
							<span v-text="result.message"></span>
						</div>
						<Form ref="form" :model="form.model" :rules="form.rules" :label-width="100">
							<FormItem label="申请人" prop="linkman">
								<Input v-model="form.model.linkman"></Input>
							</FormItem>
							<FormItem label="申请日期" prop="createDate">
								<Input v-model="form.model.createDate"></Input>
							</FormItem>
							<FormItem label="手机号" prop="telephone">
								<Input v-model="form.model.telephone"></Input>
							</FormItem>
							<FormItem label="邮箱" prop="email">
								<Input v-model="form.model.email"></Input>
							</FormItem>
							<FormItem label="身份证号码" prop="idNumber">
								<Input v-model="form.model.idNumber"></Input>
							</FormItem>
							<FormItem label="店铺名称" prop="shop">
								<Input v-model="form.model.shop"></Input>
							</FormItem>
							<FormItem label="货币类型" prop="currencyType">
								<Select v-model="form.model.currencyType">
									<Option v-for="item in currencyList" :value="item.type" :key="item.type">{{ item.symbol }}</Option>
								</Select>
							</FormItem>
							<!-- <FormItem label="货币类型" prop="currencyType">
					           <Input v-model="form.model.country"></Input>
					        </FormItem> -->
							<FormItem label="所在国家" prop="country">
								<Select v-model="form.model.country">
									<Option v-for="item in countryList" :value="item.id" :key="item.id">{{ item.name }}</Option>
								</Select>
							</FormItem>
							<FormItem label="公司名称" prop="company">
								<Input v-model="form.model.company"></Input>
							</FormItem>
							<FormItem label="公司地址" prop="location">
								<Input v-model="form.model.location"></Input>
							</FormItem>
							<FormItem label="上传营业执照" required>
								<ws-upload-cos ref="upload" catelog="merchants" :cfile-key="form.upload.fileKey" :show-upload-list="false" :format="['jpg','jpeg','png']" :max-size="2048" :on-success="uploadSuccess" type="drag">
									<div style="padding: 20px 0" v-if="form.model.licenseUrl == ''">
										<Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
										<p>选择或者拖动图片到此区域</p>
									</div>
									<div style="padding: 0px 0; width: 200px; height: 250px" v-if="form.model.licenseUrl != ''">
										<img :src="form.model.licenseUrl" style="width: 200px; height: 250px" />
									</div>
								</ws-upload-cos>
							</FormItem>
							<FormItem>
								<Button type="primary" @click="saveForm">提交申请</Button>
								<Button @click="goBack">返回登录页</Button>
							</FormItem>
						</Form>
					</div>

					<div v-if="result.code == 0" style="text-align: center">
						<p style="font-size: 23px;padding-bottom: 30px;">提交申请成功,请等待平台审核通知!</p>
						<Button @click="goBack">返回登录页</Button>
					</div>
				</div>
			</wsPanel>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				currencyList: [],
				countryList: [],
				form: {
					model: {
						linkman: "",
						telephone: "",
						email: "",
						idNumber: "",
						shop: "",
						currencyType: "",
						company: "",
						licenseUrl: "",
						country: "",
						location: ""
					},
					rules: {
						linkman: [{
								required: true,
								message: "申请人不能为空",
								trigger: "blur"
							},
							{
								max: 32,
								message: "申请人长度不能大于32位",
								trigger: "blur"
							}
						],
						telephone: [{
								required: true,
								message: "申请人不能为空",
								trigger: "blur"
							},
							{
								max: 32,
								message: "手机号长度不能大于32位",
								trigger: "blur"
							}
						],
						email: [{
								required: true,
								message: "邮箱地址不能为空",
								trigger: "blur"
							},
							{
								type: "email",
								message: "输入格式不正确",
								trigger: "blur"
							}
						],
						idNumber: [{
								required: true,
								message: "身份证号不能为空",
								trigger: "blur"
							},
							{
								max: 32,
								message: "身份证号长度不能大于32位",
								trigger: "blur"
							}
						],
						shop: [{
								required: true,
								message: "店铺名称不能为空",
								trigger: "blur"
							},
							{
								max: 32,
								message: "店铺名称长度不能大于32位",
								trigger: "blur"
							}
						],
						currencyType: [{
							required: true,
							message: "货币类型必须设置"
						}],
						company: [{
								required: true,
								message: "公司名称不能为空",
								trigger: "blur"
							},
							{
								max: 64,
								message: "公司名称长度不能大于64位",
								trigger: "blur"
							}
						],
						country: [{
							required: true,
							message: "所在国家必须设置"
						}],
						location: [{
								required: true,
								message: "公司地址不能为空",
								trigger: "blur"
							},
							{
								max: 64,
								message: "公司地址长度不能大于64位",
								trigger: "blur"
							}
						],

					},
					
					upload: {
						fileKey: ""
					}
				},
				result: {
					code: -1,
					message: ""
				}
			};
		},
		computed: {},
		mounted() {
			this.init();
		},
		methods: {
			init() {
				this.initCurrency();
				this.initCountry();
			},
			initCurrency() {
				let _this = this;
				this.axios.get("/ws/api/ms/s/currencies").then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						this.currencyList = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			initCountry() {
				let _this = this;
				this.axios.get("/ws/api/ops/areas/states").then(response => {
					var res = response.data;
					var resMeta = res.meta;
					if(0 == resMeta.code) {
						this.countryList = res.data;
					} else {
						_this.$Message.warning(resMeta.message);
					}
				});
			},
			saveForm() {
				this.$refs["form"].validate(valid => {
					if(valid) {
						if(this.form.model.licenseUrl == "") {
							this.$Message.info("必须上传营业执照");
							return;
						}
						this.submitForm();
					}
				});
			},
			submitForm() {
				const _this = this;
				let postData_ = this.form.model;
				this.axios
					.post("/ws/api/ms/merchantApplyRecord", postData_)
					.then(function(response) {
						let res = response.data;
						if(0 === res.meta.code) {
							_this.result.code = 0;
							_this.$Message.success("提交申请成功");
						} else {
							let message_ = res.meta.message;
							_this.result.message = message_;
							_this.$Message.warning("新增失败:" + message_);
						}
					});
			},
			uploadSuccess(response, file, fileList) {
				if(0 == response.meta.code) {
					this.form.model.licenseUrl = response.data.pubFileUrl;
					this.form.upload.fileKey = response.data.fileId;
				}
			},
			goBack() {
				window.location.href = "./login.html";
			}
		}
	};
</script>

<style>
	html,
	body {
		overflow: auto !important;
	}
	
	.title {
		font-size: 20px;
		text-align: center;
		padding: 15px;
	}
	
	.errorMsg {
		padding-bottom: 20px;
		color: red;
		text-align: center;
		font-size: 18px;
	}
</style>